<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="课程培训名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入课程培训名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="培训开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime">
              <j-date placeholder="请选择培训开始时间"  v-model="model.startTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="培训结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
              <j-date placeholder="请选择培训结束时间"  v-model="model.endTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="培训内容描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
              <a-input v-model="model.description" placeholder="请输入培训内容描述"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="租户ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tenantId">
              <a-input-number v-model="model.tenantId" placeholder="请输入租户ID" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
          <!--点击用户列表-->
            <a-form-model-item label="用户选择" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="users">
              <j-select-multi-user
                mode="multiple"
                v-decorator="['users']"
                style="width: 100%"
                placeholder="请选择用户"
                v-model='model.users'
                prop="users"
              />
              {{ getFormFieldValue('users') }}
            </a-form-model-item>


<!--            <a-form-model-item label="用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="users">-->
<!--              <a-select-->
<!--                mode="multiple"-->
<!--                style="width: 100%"-->
<!--                placeholder="请选择用户"-->
<!--                @change="handleChangeSelect"-->
<!--                v-model='model.users'-->
<!--              >-->

<!--                <a-select-option v-for="item in userList" :key="item.id" :value ="item.id">-->
<!--                  {{item.username}}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-model-item>-->
          </a-col>
<!--          <div>{{model.courses}}</div>-->
          <a-col :span="24">
            <a-form-model-item
              label="课程内容"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="courseList"
            >
              <div>
                <a-button type="primary" @click="addTrainingCourse">添加课程</a-button>
              </div>
              <div class='courseListBlock' v-for="(courseItem,index) in model.courses">
                <div class='iconBlock'>
                  <div class='icon' >
                    <div style='color: white'>{{ index+1 }}</div>
                  </div>
                  <span>
                    课程{{ index+1 }}
                  </span>
                </div>
                <div class='' style='padding-left: 20px; padding-right: 20px'>
                  <a-select
                    style='width: 200px'
                    :default-value='courseItem.courseId'
                    v-model='courseItem.courseId'
                    @change='selectCourse'>
                    <a-select-option v-for='course in courseList' :key ="course.id" :value='course.id'>
                      {{ course.name }}
                    </a-select-option>
                  </a-select>
                  <a-icon @click='reduceTrainingCourse(index)' type="close" />
                </div>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import { httpAction, postAction } from '@/api/manage'
  export default {
    name: 'TrainingForm',
    components: {
      JSelectMultiUser
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      id: 1
    },
    data () {
      return {
        // model:{
        //  },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/trainingManage/training/addTraining",
          edit: "/trainingManage/training/editTraining",
          queryById: "/trainingManage/training/trainingList",
          getUser: "/sys/user/trainingUserRole",
          getCourseList: "/cscourse/csCourse/courseList"
        },
        courseList: [],
        userList:[],
        form: this.$form.createForm(this),
        //
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      model(){
        return this.$store.state.training.trainingInfo
      },


    },
    created () {
      this.getUser()
      this.getCourseList()
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },

    methods: {
      addTrainingCourse(){
        this.$store.commit('addCourses')
      },
      reduceTrainingCourse(index){
        this.$store.commit('reduceCourses',index)
      },

      handleChangeSelect(value){
      },
      add () {
          this.$store.commit('clearStateTraining');
          this.edit(null);
      },
      edit(record) {
        // if (record){
        //   let trainingInfo = this.$store.state.training.trainingInfo
        //   trainingInfo.users = trainingInfo.users.map(user => {
        //     return user.userId
        //   })
        //   trainingInfo.courses = trainingInfo.courses.map(course => {
        //     return { id: course.courseId }
        //   })
        //   this.model = Object.assign({}, trainingInfo);
        // }else {
        //   this.model = Object.assign({}, {});
        // }
        this.visible = true;
      },
      getUser(){
        httpAction(this.url.getUser,null,'get').then(
          res =>{
            this.userList =res.data
          }
        )
      },
      getCourseList(){
        httpAction(this.url.getCourseList,null,'get').then(
          res => {
            this.courseList = res.data
          }
        )
      },
      selectCourse(value){
      },

      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'post';
            }
            let model = this.model
            model.users = model.users.split(",")
            let userList = this.userList
            console.log(userList)

            model.users = userList.map(item => {
              if(model.users.includes(item.username)) {
                return item.id;
              }
            }).filter(id => !!id);
            
            model.courses = model.courses.map((c,index) =>  {
              return {courseId:c.courseId,sort: index+1}})
            const requestModel ={
              id: model.id,
              name:model.name,
              startTime:model.startTime,
              endTime:model.endTime,
              description:model.description,
              userIds:model.users,
              trainingCourse:model.courses
            }
            postAction(httpurl,requestModel,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },

      getFormFieldValue(field){
        return this.form.getFieldValue(field)
      },
    }
  }
</script>
<style scoped>
  .courseListBlock{
    margin-left: 40px;
    margin-top: 20px;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .iconBlock{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    display: flex;
  }
  .icon{
    background-color: #0c8fcf;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }
</style>